<!DOCTYPE html>
<title>Invalidation of selector containing mixed-case tag name</title>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
filter feFlood {
  flood-opacity: 0;
}
svg.filter feFlood {
  flood-opacity: 1;
}
</style>
<svg>
  <filter id="f" x="0" y="0" width="1" height="1">
    <feFlood id="flood" flood-color="green"/>
  </filter>
  <rect width="100" height="100" fill="red" filter="url(#f)"/>
</svg>
<script>
test(() => {
  assert_equals(getComputedStyle(flood).floodOpacity, "0",
                "flood-opacity is initially 0");
  document.querySelector('svg').classList.toggle("filter");
  assert_equals(getComputedStyle(flood).floodOpacity, "1",
                "flood-opacity is 1 after adding class");
});
</script>
